<template>
	<view>
		<n-loading></n-loading>
		<top-bar :home="false" :backState="2000" :transparentFixedFontColor="mineAssembly.topTabFontColor" :type="mineAssembly.topTabType" title="我的"></top-bar>

			<view class="mePage" v-if="mineAssembly.memberInfo">
				<view class="bjTop">
					<view class="meTop" :style="{ paddingTop: (statusBarHeight*2+88) + 'rpx' }">
						<view class="meTitle">
							<u-avatar :src="mineAssembly.memberInfo.avatar==null?src:mineAssembly.memberInfo.avatar" size="112"></u-avatar>
							<view class="memberInfo">
								<view class="name">{{mineAssembly.memberInfo.nickname}}</view>
								<view class="vipRank" v-if="mineAssembly.vipInfo">
									<view class="rank" @tap="rankGo">
										<image :src="vipIcon[mineAssembly.vipInfo.level]" mode=""></image>
									</view>
								</view>
							</view>
							<view class="codeAndMsg">
								<view class="mineMenu">
									<view class="mineMenuBox" @tap="myCodeGo">
										邀请有礼
										<image class="invite" src="https://lovebirdopen.com/static/img/cBj/invite.png" mode=""></image>
									</view>
									<view class="setUpBox">
										<u-icon @click="serviceGo" name="kefu-ermai" color="#333" size="40"></u-icon>
										<u-icon @click="setUpGo" name="setting" color="#333" size="40"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="property">
							<view class="item" @tap="seeCard">
								<view class="val">{{mineAssembly.memberInfo.order_team_share.length}} <text>张</text></view>
								<view class="title">酒卡</view>
							</view>
							<view class="item" @tap="couponsLink">
								<view class="val">{{mineAssembly.memberInfo.promotion_coupon.length}} <text>张</text></view>
								<view class="title">优惠券</view>
							</view>
							<view class="item" @tap="collectGo">
								<view class="val">{{mineAssembly.memberInfo.user_follow?mineAssembly.memberInfo.user_follow.length:0}}</view>
								<view class="title">收藏</view>
							</view>
							<view class="item" @tap="goldCoin">
								<view class="val">{{mineAssembly.memberInfo.coin}}</view>
								<view class="title">金币</view>
							</view>
						</view>
					</view>
					<!-- 会员等级 -->
					<!-- <view class="meMemberBox">
						<view class="meMember">
							<view class="memIconBox">
								<image src="https://lovebirdopen.com/static/img/grade/memIcon.svg" mode=""></image>
								<view>{{mineAssembly.vipInfo.title_first}}</view>
							</view>
							<view class="line"></view>
							<view class="myLevel">我的等级{{mineAssembly.vipInfo.title_last}}</view>
							<view class="progress">
								<view class="progressIng" :style="{width:((parseInt(mineAssembly.memberInfo.accumulate)-parseInt(mineAssembly.vipInfo.prev_integral))/(parseInt(mineAssembly.vipInfo.next_integral)-parseInt(mineAssembly.vipInfo.prev_integral)))*100+'%'}"></view>
							</view>
							<view class="experience">{{mineAssembly.memberInfo.accumulate}}/{{mineAssembly.vipInfo.next_integral}}</view>
							<view class="goIcon" @tap="rankGo">
								<u-icon name="arrow-right" color="rgba(255, 255, 255, 0.7)" size="20"></u-icon>
							</view>
						</view>
					</view>
				</view> -->
				
				<!-- <view class="bjBot">
					<view class="commonBox">
						<view class="totalProfit">
							<view class="top">
								<view class="title">累计收益</view>
								<view class="val">{{mineAssembly.memberInfo.total_revenue==null?0:mineAssembly.memberInfo.total_revenue}}</view>
								<view class="details" @tap="accountBook">
									<u-icon name="file-text" color="#fff" size="24"></u-icon>收益明细
								</view>
							</view>
							<view class="bot">
								<view class="each">
									<view class="tit">今日收益</view>
									<view class="val">{{mineAssembly.memberInfo.today_profit}}</view>
								</view>
								<view class="line"></view>
								<view class="each">
									<view class="tit">当月收益</view>
									<view class="val">{{mineAssembly.memberInfo.this_month_profit}}</view>
								</view>
							</view>
						</view>
						<view class="withdraw">
							可提现收益(元) <text>{{mineAssembly.memberInfo.amount}}</text>
							<view class="btn" @tap="withdrawalGo">提现</view>
						</view>
					</view> -->
					<view class="commonBox padCom">
						<view class="comTit">
							我的订单
							<view class="allOrder" @tap="linkPage(0)">全部订单<u-icon name="arrow-right" color="#999" size="16"></u-icon></view>
						</view>
						<view class="orderNav">
							<view class="navItem" @tap="linkPage(1)">
								<view class="numPending" v-if="mineAssembly.memberInfo.order.pay_no!=0">{{mineAssembly.memberInfo.order.pay_no}}</view>
								<image src="../../static/img/orderNav1.svg" mode=""></image>
								<view>待付款</view>
							</view>
							<view class="navItem" @tap="linkPage(2)">
								<view class="numPending" v-if="mineAssembly.memberInfo.order.ship_no!=0">{{mineAssembly.memberInfo.order.ship_no}}</view>
								<image src="../../static/img/orderNav2.svg" mode=""></image>
								<view>待发货</view>
							</view>
							<view class="navItem" @tap="linkPage(3)">
								<view class="numPending" v-if="mineAssembly.memberInfo.order.ship_yes!=0">{{mineAssembly.memberInfo.order.ship_yes}}</view>
								<image src="../../static/img/orderNav3.svg" mode=""></image>
								<view>待收货</view>
							</view>
							<view class="navItem" @tap="linkPage(4)">
								<view class="numPending" v-if="mineAssembly.memberInfo.order.wait_comment!=0">{{mineAssembly.memberInfo.order.wait_comment}}</view>
								<image src="../../static/img/orderNav4.svg" mode=""></image>
								<view>待评价</view>
							</view>
							<view class="navItem" @tap="refund()">
								<view class="numPending" v-if="mineAssembly.memberInfo.order.after_sales!=0">{{mineAssembly.memberInfo.order.after_sales}}</view>
								<image src="../../static/img/orderNav5.svg" mode=""></image>
								<view>售后</view>
							</view>
						</view>
						<view class="writeOff">
							<view class="each" @tap="writeoffOrder(0)">
								<view class="tit">待使用</view>
								<view class="num">{{mineAssembly.memberInfo.wait_verification}}</view>
								<u-icon name="arrow-right" color="#999" size="16"></u-icon>
							</view>
							<view class="each fr" @tap="writeoffOrder(1)">
								<view class="tit">已完成</view>
								<view class="num">{{mineAssembly.memberInfo.already_verification}}</view>
								<u-icon name="arrow-right" color="#999" size="16"></u-icon>
							</view>
						</view>
					</view>
					<!-- <view class="commonBox padCom">
						<view class="comTit">我的团队</view>
						<view class="orderNav">
							<view class="navItem navItem1" @tap="myTeam">
								<image src="https://lovebirdopen.com/static/img/svgIcon/myTeam1.svg" mode=""></image>
								<view>我的团队</view>
							</view>
							<view class="navItem navItem1" @tap="devoteRank">
								<image src="https://lovebirdopen.com/static/img/svgIcon/myTeam2.svg" mode=""></image>
								<view>贡献排名</view>
							</view>
							<view class="navItem navItem1">
								<image src="https://lovebirdopen.com/static/img/svgIcon/myTeam3.svg" mode=""></image>
								<view>补贴激励</view>
							</view>
						</view>
					</view>
					<view class="commonBox padCom">
						<view class="comTit">平台服务</view>
						<view class="orderNav">
							<view class="navItem navItem1">
								<image src="https://lovebirdopen.com/static/img/svgIcon/service1.svg" mode=""></image>
								<view>商家入驻</view>
							</view>
							<view class="navItem navItem1">
								<image src="https://lovebirdopen.com/static/img/svgIcon/service2.svg" mode=""></image>
								<view>发展动态</view>
							</view>
							<view class="navItem navItem1">
								<image src="https://lovebirdopen.com/static/img/svgIcon/service3.svg" mode=""></image>
								<view>吐小槽</view>
							</view>
							<view class="navItem navItem1">
								<image src="https://lovebirdopen.com/static/img/svgIcon/service4.svg" mode=""></image>
								<view>关于我们</view>
							</view>
						</view>
					</view> -->
				</view>
			</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vipIcon:[
					'https://lovebirdopen.com/static/img/grade/SilverV0.svg',
					'https://lovebirdopen.com/static/img/grade/SilverV1.svg',
					'https://lovebirdopen.com/static/img/grade/SilverV2.svg',
					'https://lovebirdopen.com/static/img/grade/SilverV3.svg',
					'https://lovebirdopen.com/static/img/grade/goldV1.svg',
					'https://lovebirdopen.com/static/img/grade/goldV2.svg',
					'https://lovebirdopen.com/static/img/grade/goldV3.svg',
					'https://lovebirdopen.com/static/img/grade/diamondV1.svg',
					'https://lovebirdopen.com/static/img/grade/diamondV2.svg',
					'https://lovebirdopen.com/static/img/grade/diamondV3.svg',
					'https://lovebirdopen.com/static/img/grade/supremeV7.svg',
				],
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				// 导航栏高度
				statusBarHeight: 0
			}
		},
		props:["mineAssembly"],
		mounted(){
			
		},
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		methods: {
			
			
			
		
			
			gogo(){
				uni.requestSubscribeMessage({
				  tmplIds: ['GDDzqvAITQfmEVdkn5kb_-AVueLUlUa5hf1RmFm-6W0'],
				  success (res) {
					  console.log(res)
				  },
				  fail(res){
					  console.log(res)
				  }
				})
			},
			
			serviceGo(){},
			setUpGo(){
				uni.navigateTo({
					url: '/pages/mine/setUp'
				});
			},
			rankGo(){
				uni.navigateTo({
					url:"/pages/member/newMember"
				})
			},
			myCodeGo(){//我的会员码
				uni.navigateTo({
					url: '/pages/mine/inviteFriends'
				});
			},
			seeCard(){//我的酒卡
				uni.navigateTo({
					url: '/pages/mine/myCard'
				});
			},
			linkPage(tab){
				uni.navigateTo({
					url:"/pages/order/order?tab="+tab
				})
			},
			writeoffOrder(tab){
				uni.navigateTo({
					url:"/pages/order/writeoffOrder?tab="+tab
				})
			},
			couponsLink(){
				uni.navigateTo({
					url: '/pages/mine/coupons'
				});
			},
			collectGo(){
				uni.navigateTo({
					url: '/pages/mine/collect'
				});
			},
			goldCoin(){
				uni.navigateTo({
					url: '/pages/mine/integralInfo'
				});
			},
			// 收益明细
			accountBook(){
				uni.navigateTo({
					url: '/pages/member/accountBook'
				});
			},
			// 我的团队
			myTeam(){
				uni.navigateTo({
					url: '/pages/member/myTeam'
				});
			},
			// 贡献排名
			devoteRank(){
				uni.navigateTo({
					url: '/pages/member/devoteRank'
				});
			},
			//退款退货
			refund() {
				uni.navigateTo({
					url: '/pages/refund/refund'
				});
			},
			// 提现
			withdrawalGo(){
				uni.navigateTo({
					url: '/pages/member/withdrawal'
				});
			},
		}
	}
</script>

<style lang="scss">
	.mePage{
		background: #F8F8FA;
	}
	.orderManage {
		position: relative;
		padding-top: 32rpx;
		background-color: #FFFFFF;
		box-shadow: 0px -4px 8px rgba(123, 93, 52, 0.14);
		border-radius: 16rpx;
		background-color: #fff;

		
		.mineNav{
			padding: 0 44rpx 0 32rpx;
			
			.mineNavEach{
				display: flex;
				align-items: center;
				padding: 26rpx 0;
				
				image{
					width: 44rpx;
					height: 44rpx;
					margin-right: 16rpx;
				}
				
				.mineNavTxt{
					flex: auto;
					font-size: 28rpx;
					line-height: 44rpx;
					color: #333333;
				}
			}
		}
	}


	.bjTop{
		background-color: #fff;
	}
	.meTop{
		padding: 0 32rpx;
		background: linear-gradient(180deg, rgba(248, 248, 250, 0) 0%, rgba(248, 248, 250, 0.8) 100%), linear-gradient(65.01deg, #FFE4DF 0%, #FFFFFF 100%);
		box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
	}
	.meTitle {
		padding: 32rpx 0;
		font-size: 0;
		display: flex;
		align-items: center;
		
		.memberInfo {
			margin-left: 32rpx;
		
			.name {
				font-size: 32rpx;
				line-height: 48rpx;
				margin: 8rpx 0;
			}
		
			.vipRank {
				display: flex;
				align-items: center;
			}
			
			.rank{
				image{
					width: 92rpx;
					height: 40rpx;
				}
			}
		}
	}
	.codeAndMsg{
		display: flex;
		align-items: center;
		// width: 100rpx;
		margin-left: auto;
		
		.mineMenu{
			position: relative;
			height: 100%;
			padding-top: 48rpx;
			
			.mineMenuBox{
				position: relative;
				height: 48rpx;
				padding: 0 16rpx 0 38rpx;
				font-size: 24rpx;
				line-height: 48rpx;
				color: #FF5238;
				background: linear-gradient(180deg, rgba(255, 82, 56, 0.12) 0%, rgba(255, 128, 56, 0.12) 100%);
				border-radius: 46rpx;
				
				.invite{
					position: absolute;
					left: -43.6rpx;
					bottom: -4rpx;
					width: 86rpx;
					height: 66rpx;
				}
			}
			.setUpBox{
				position: absolute;
				top: -32rpx;
				right: 0;
				
				u-icon{
					margin-left: 24rpx;
				}
			}
		}
	}
	.property{
		padding-bottom: 32rpx;
		display: flex;
		text-align: center;
		
		.item{
			width: 25%;
			
			.val{
				margin-bottom: 16rpx;
				font-size: 36rpx;
				line-height: 28rpx;
				font-weight: bold;
				color: #333;
				
				text{
					margin-left: 4rpx;
					font-weight: normal;
					font-size: 20rpx;
				}
			}
			.title{
				font-size: 24rpx;
				line-height: 24rpx;
				color: #666666;
			}
		}
	}
	
	// 会员等级
	.meMemberBox{
		padding: 0 32rpx;
		
		.meMember{
			display: flex;
			align-items: center;
			padding: 16rpx 40rpx;
			background: linear-gradient(278.64deg, #2E2E2E -2.7%, #454545 9.37%, #383838 33.54%, #313131 95.31%);
			border-radius: 0 0 16rpx 16rpx;
			
			.memIconBox{
				width: 100rpx;
				margin-right: 40rpx;
				font-size: 24rpx;
				text-align: center;
				
				view{
					background: linear-gradient(to right, #F4D6A7, #D2AE76);
					-webkit-background-clip: text;
					color: transparent;
				}
				
				image{
					display: inline-block;
					width: 40rpx;
					height: 30rpx;
				}
			}
			.line{
				height: 48rpx;
				width: 2rpx;
				margin-right: 32rpx;
				background-color: rgba(255, 255, 255, 0.12);
			}
			.myLevel{
				margin-right: 8rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
			}
			.progress{
				position: relative;
				width: 100rpx;
				height: 8rpx;
				margin-right: 8rpx;
				background: rgba(255, 255, 255, 0.24);
				border-radius: 28rpx;
				overflow: hidden;
				
				.progressIng{
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
					border-radius: 28rpx;
					background: linear-gradient(90deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0.7) 72.69%, rgba(255, 255, 255, 0.7) 99.69%);
				}
			}
			.experience{
				font-size: 16rpx;
				color: rgba(255, 255, 255, 0.54);
			}
			.goIcon{
				flex: 1;
				text-align: right;
			}
		}
	}
	
	.bjBot{
		padding: 24rpx 32rpx 150rpx;
	}
	.commonBox{
		margin-bottom: 32rpx;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.04);
		border-radius: 16rpx;
		overflow: hidden;
		
		.comTit{
			padding-bottom: 8rpx;
			font-size: 32rpx;
			line-height: 48rpx;
			color: #333333;
			
			.allOrder{
				float: right;
				font-size: 24rpx;
				color: #666;
			}
		}
	}
	.padCom{
		padding: 32rpx 32rpx 24rpx 32rpx;
	}
	.totalProfit{
		background: linear-gradient(96.62deg, #EE4029 3.4%, #F3693D 67.77%);
		box-shadow: 0px 8rpx 16rpx rgba(255, 82, 56, 0.12);
		border-radius: 16rpx;
		
		.top{
			position: relative;
			padding: 30rpx 32rpx 20rpx;
			
			.title{
				font-size: 24rpx;
				line-height: 28rpx;
				color: rgba(255, 255, 255, 0.7);
			}
			.val{
				font-size: 52rpx;
				line-height: 66rpx;
				color: #FFFFFF;
			}
			.details{
				position: absolute;
				top: 26rpx;
				right: 0;
				padding: 10rpx 24rpx 10rpx 16rpx;
				font-size: 24rpx;
				background: rgba(255, 255, 255, 0.12);
				border-radius: 24rpx 0px 0px 24rpx;
				color: #FFFFFF;
				
				u-icon{
					margin-right: 8rpx;
				}
			}
		}
		.bot{
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
			
			.each{
				flex: 1;
				padding: 0 34rpx;
				
				.tit{
					margin-bottom: 4rpx;
					font-size: 24rpx;
					line-height: 24rpx;
					color: rgba(255, 255, 255, 0.7);
				}
				.val{
					font-size: 36rpx;
					line-height: 52rpx;
					color: #FFFFFF;
				}
			}
			.line{
				height: 52rpx;
				width: 2rpx;
				background-color: rgba(255, 255, 255, 0.7);
			}
		}
	}
	.withdraw{
		padding: 14rpx 24rpx;
		line-height: 52rpx;
		font-size: 28rpx;
		color: #999;
		
		text{
			margin-left: 8rpx;
			color: #333;
		}
		.btn{
			float: right;
			width: 104rpx;
			height: 52rpx;
			color: #666;
			text-align: center;
			background: #F8F8FA;
			border-radius: 32rpx;
		}
	}
	.orderNav {
		display: flex;
		padding: 24rpx 0;
		align-items: center;
		
		.navItem{
			position: relative;
			flex: 1;
			text-align: center;
			font-size: 24rpx;
			
			image{
				width: 60rpx;
				height: 60rpx;
				margin: 0 auto;
			}
			
			.numPending{
				position: absolute;
				top: -10rpx;
				display: inline-block;
				padding: 0 8rpx;
				font-size: 24rpx;
				line-height: 28rpx;
				color: #FF5238;
				border: 2rpx solid #FF5238;
				border-radius: 48rpx;
				background-color: #fff;
			}
		}
		.navItem1{
			image{
				width: 56rpx;
				height: 56rpx;
				margin-bottom: 8rpx;
			}
		}
	}
	.writeOff{
		height: 80rpx;
		line-height: 80rpx;
		
		.each{
			float: left;
			width: 48.7%;
			height: 100%;
			display: flex;
			align-items: center;
			padding: 0 32rpx 0 24rpx;
			font-size: 28rpx;
			color: #333333;
			background: #F8F8FA;
			border-radius: 8rpx;
			
			.tit{
				flex: 1;
			}
			
			.num{
				color: #666666;
			}
			
			u-icon{
				margin-left: 12rpx;
			}
		}
		.fr{
			float: right;
		}
	}
</style>
